<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no"> 
 <title>Happy Birthday</title>
 <link rel="stylesheet" href="css/jquery.fullPage.css">
 <link rel="stylesheet" href="css/memories.css">
</head>

<body>
  <!-- 背景音乐 -->
  <div style="display:none">
    <!-- 网易云外链 -->
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=480353&auto=1&height=66"></iframe>
  </div>
<div class="bgcolor">
  <div style="z-index:100;" id="dowebok">
      <!--第一屏-->
      <div class="section">
          <div class="ly-box01">
            <div class="ly-txt01">
              <p class="ly-stxt01">我行过许多地方的桥</p>
              <p class="ly-stxt02">看过许多次数的云</p>
              <p class="ly-stxt03">喝过许多种类的酒</p>
              <p class="ly-stxt04">却只爱过一个</p>
              <p class="ly-stxt05">正当最好年龄的人</p>
            </div>
            <div class="ly-txt02">
              <p class="ly-stxt06">2011年的夏天</p>
              <p class="ly-stxt07">阳光透过慵懒的树叶</p>
              <p class="ly-stxt08">老旧的桌椅吱呀作响</p>
              <p class="ly-stxt09">好像在说着</p>
              <p class="ly-stxt10">一个美好的故事</p>
            </div>
        </div>
      </div>

      <!--第二屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
          <div class="ly-box11">
              <div class="ly-txt11">
                  2011-05-11
              </div>
              <div class="ly-txt12">
                  <p>中学时代唯一一张同框的照片</p>
                  <p>离谱，这时候的头发竟然比你长</p>
              </div>
              <div class="ly-imgbox12">
                <img class="ly-img11" src="img/graduate.jpeg">
              </div>
          </div>
          <div class="ly-triangle11"></div>

          <div class="ly-box12">
              <div class="ly-txt13">
                  2012-2015
              </div>
              <div class="ly-txt14">
                <p>四季开始变慢</p>
                <p>有很多记忆开始发生</p>
              </div>
              <div class="ly-imgbox12">
                <img class="ly-img11" src="img/luzhong.jpeg">
              </div>
          </div>
          <div class="ly-triangle12"></div>
      </div>

      <!--第三屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box21">
              <div class="ly-txt21">
                  2016-10-03
              </div>
              <div class="ly-txt20">
                 <p>开始的开始</p>
                 <p>一起去北京</p>
              </div>
              <div class="ly-imgbox21">
                <img class="ly-img21" src="img/beijing.JPG">
              </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
              <div class="ly-txt23">
                  2016-10-05
              </div>
              <div class="ly-txt19">
                  <p>后海的酒吧一条街</p>
                  <p>用蜡笔染色的小女生</p>
              </div>
              <div class="ly-imgbox22">
                <img class="ly-img22" src="img/houhai.JPG">
              </div>
          </div>
          <div class="ly-triangle22"></div>

           <div class="ly-box23">
              <div class="ly-txt25">
                  从你的全世界路过
              </div>
              <div class="ly-imgbox23">
                <img class="ly-img23" src="img/movie.jpg">
              </div>
          </div>
          <div class="ly-triangle23"></div>
      </div>

      <!--第四屏-->

      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint31"></div>
          <div class="ly-box31">
              <div class="ly-txt31">
                  远赴山海来到我在的城市
              </div>
              <div class="ly-txt32">
                  <p>大连大连</p>
              </div>
              <div class="ly-imgbox31">
                <img class="ly-img31" src="img/dalian.jpeg">
              </div>
          </div>
          <div class="ly-triangle31"></div>

          <div class="ly-box32">
              <div class="ly-txt33">
                  第一次坐过山车 
              </div>
              <div class="ly-txt34">
                 <p>排队ing</p>
              </div>
              <div class="ly-imgbox31">
                <img class="ly-img31" src="img/motianlun.JPG">
              </div>
          </div>
          <div class="ly-triangle32"></div>
      </div>

  <!--第五屏-->
  <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box52">
              <div class="ly-txt21">
                  2018-08-16
              </div>
              <div class="ly-txt20">
                 <P>再见你时</P>
                 <p>如梦之梦</p>
              </div>
              <div class="ly-imgbox21">
                <img class="ly-img21" src="img/zaijian.JPG">
              </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
              <div class="ly-txt23">
                  <p>  合肥合肥</p>
              </div>
              <div class="ly-txt51">
                <p>化妆的小仙女</p>   
              </div>
              <div class="ly-imgbox22">
                <img class="ly-img21" src="img/girl.JPG">
              </div>
          </div>
          <div class="ly-triangle22"></div>

           <div class="ly-box51">
              <div class="ly-txt25">
              </div>
              <div class="ly-txt26">
                <p>结婚照？no</p>
              </div>
              <div class="ly-imgbox23">
                <img class="ly-img23" src="img/zhengjian.JPG">
              </div>
          </div>
          <div class="ly-triangle23"></div>
      </div>

  <!--第六屏-->
  <div class="section">
          <div class="timeline"></div>
          <div class="timepoint21"></div>
          <div class="ly-box21">
              <div class="ly-txt21">
                  2018-12-28
              </div>
              <div class="ly-txt22">
                 <p>深圳</p>
                 <p>11月的深圳</p>
                 <p>暖和的不像话</p> 
              </div>
              <div class="ly-imgbox21">
                <img class="ly-img21" src="img/shenzhen.JPG">
              </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
              <div class="ly-txt23">
                  你的大学
              </div>
              <div class="ly-txt22">
                <p>竟还没软院大，😂</p>
                <p>🐶保命</p>
              </div>
              <div class="ly-imgbox22">
                <img class="ly-img22" src="img/xuexiao.JPG">
              </div>
          </div>
          <div class="ly-triangle22"></div>

           <div class="ly-box23">
              <div class="ly-txt25">
                  这是谁家的小可爱
              </div>
              <div class="ly-txt61">
                <p>我抱走咯，👇</p>
              </div>
              <div class="ly-imgbox23">
                <img class="ly-img23" src="img/bingyong.JPG">
              </div>
          </div>
          <div class="ly-triangle23"></div>
      </div>

      <!--第七屏-->
      <div class="section">
          <div class="timeline"></div>
          <div class="timepoint23"></div>
          <div class="ly-box21">
              <div class="ly-txt21">
                  2018-12-29
              </div>
              <div class="ly-txt20">
                <p>抵达厦门</p>
                <p>厦门的步行街</p>
              </div>
              <div class="ly-imgbox21">
                <img class="ly-img21" src="img/xiamen.JPG">
              </div>
          </div>
          <div class="ly-triangle21"></div>

          <div class="ly-box22">
              <div class="ly-txt23">
                  厦门的海
              </div>
              <div class="ly-txt19">
                  <p>继续🐶保命</p>
              </div>
              <div class="ly-imgbox22">
                <img class="ly-img22" src="img/xiamen_hai.JPG">
              </div>
          </div>
          <div class="ly-triangle22"></div>

           <div class="ly-box23">
              <div class="ly-txt25">
                  起飞
              </div>
              <div class="ly-imgbox23">
                <img class="ly-img23" src="img/qifei.JPG">
              </div>
          </div>
          <div class="ly-triangle23"></div>
      </div>


      <!--第八屏-->

      <div class="section">
        <div class="timeline"></div>
        <div class="timepoint23"></div>
        <div class="ly-box21">
            <div class="ly-txt21">
                2019-03-29
            </div>
            <div class="ly-txt20">
              <p>Back to 大连</p>
            </div>
            <div class="ly-imgbox21">
              <img class="ly-img21" src="img/dalian2.JPG">
            </div>
        </div>
        <div class="ly-triangle21"></div>

        <div class="ly-box22">
            <div class="ly-txt23">
                仙女本仙
            </div>
            <div class="ly-txt19">
                <p>最美的风景</p>
            </div>
            <div class="ly-imgbox22">
              <img class="ly-img22" src="img/xiannv.JPG">
            </div>
        </div>
        <div class="ly-triangle22"></div>

         <div class="ly-box23">
            <div class="ly-imgbox24">
              <img class="ly-img23" src="img/hezhao.JPG">
            </div>
        </div>
        <div class="ly-triangle23"></div>
    </div>

      <!--第九屏-->

<div class="section">
          <div class="timeline"></div>
          <div class="timepoint91"></div>
          <div class="ly-box21 xx91">
              <div class="ly-txt21">
                  2019-06-06
              </div>
              <div class="ly-txt90">
                 <p>山城</p>
                 <p>火锅</p>
              </div>
              <div class="ly-imgbox21 xx94">
                <img class="ly-img21" src="img/huoguo.JPG">
              </div>
          </div>
          <div class="ly-triangle21 xx92"></div>

          <div class="ly-box91">
              <div class="ly-txt23">
                  巴渝
              </div>
              <div class="ly-txt91">
                  <p>今日解签，宜外出</p>
              </div>
              <div class="ly-imgbox91">
                <img class="ly-img91" src="img/chongqing.jpeg">
              </div>
          </div>
          <div class="ly-triangle22 xx92"></div>

           <div class="ly-box92">
            <div class="ly-txt23">
                洪崖洞
            </div>
              <div class="ly-txt92">
                  <p>差点没走出来</p>
                  <p>就离谱</p>
              </div>
              <div class="ly-imgbox92">
                <img class="ly-img92" src="img/chongqing.JPG">
              </div>
          </div>
          <div class="ly-triangle91"></div>

          <div class="ly-box93">
            <div class="ly-txt23">
                你是我的禅，秀色可“参”
            </div>
              <div class="ly-imgbox93">
                <img class="ly-img93" src="img/chongqing2.JPG">
              </div>
          </div>
          <div class="ly-triangle92"></div>
      </div>
		<!--第十屏-->

	<div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
          <div class="ly-box81">
              <div class="ly-txt11">
                  2020-06-24
              </div>
              <div class="ly-txt82" style="top:8%">
                  <p class="wwww1">我们领证啦</p>
                  <p class="wwww1">故事到这，画上了分号</p>
                  <p class="wwww1">开启下一段旅程</p>
              </div>
              <div class="ly-imgbox81">
                <img class="ly-img81" src="img/jiehun.jpeg">
              </div>
          </div>
          <div class="ly-triangle11"></div>

          <div class="ly-box82">
              <div class="ly-txt13">
                  十年
              </div>
              <div class="ly-txt84">
                 <p>愿曲有误</p>
                 <p>周郎顾</p>
                 <p>周郎顾</p>
                 <p>一顾是终生</p>
              </div>
          </div>
          <div class="ly-triangle82"></div>
      </div>

       </div>
  <!--动态方块-->
  <ul class="bg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </div>
  <!-- <audio muted src="music/1.mp3" autoplay="autoplay" loop="loop"></audio> -->

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- <script src="js/auto-play.js"></script> -->
<script src="js/memories.js"></script>
</body>
</html>
